<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uCharts高性能跨全端图表</title>
    <style>
        body { background-color: #FFFFFF; }
    </style>
</head>
<body>
<div class="page-wrapper">
    <div class="content-wrapper">
        <div class="background-wrapper">
            <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
        </div>
        <div class="content-main animate">
            
        </div>
    </div>
</div>
<script  src="assets/js/u-charts.js"></script>
<script  src="assets/js/jquery-2.2.1.min.js"></script>
<script language="JavaScript">
var canvaLineA;

var chartData={"categories":["2012","2013","2014","2015","2016","2017"],"series":[{"name":"成交量A","data":[35,8,25,37,4,20]},{"name":"成交量B","data":[70,40,65,100,44,68]},{"name":"成交量C","data":[100,80,95,150,112,132]}]};

function showLineA(canvasId,chartData){
	canvaLineA=new Charts({
		canvasId: canvasId,
		type: 'line',
		fontSize:14,
		legend:true,
		dataLabel:false,
		dataPointShape:true,
		background:'#FFFFFF',
		pixelRatio:1,
		categories: chartData.categories,
		series: chartData.series,
		animation: true,
		enableScroll: true,//开启图表拖拽功能
		xAxis: {
			type:'grid',
			gridColor:'#CCCCCC',
			gridType:'dash',
			dashLength:8,
			itemCount:4,//可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
			scrollShow:true,//新增是否显示滚动条，默认false
			scrollAlign:'left',
		},
		yAxis: {
			gridType:'dash',
			gridColor:'#CCCCCC',
			dashLength:8,
			splitNumber:5,
			min:10,
			max:180,
			format:function(val){return val.toFixed(0)+'元'}
		},
		width:600,
		height:400,
		extra: {
			line:{
				type: 'straight'
			}
		}
	});
}

$('#myCanvas')[0].onmousedown=function(e) {
	canvaLineA.scrollStart(getH5Offset(e));
	$('#myCanvas')[0].onmousemove=function(e) {
		canvaLineA.scroll(getH5Offset(e));
	};
};

$('#myCanvas')[0].onmouseup=function(e) {
	canvaLineA.scrollEnd(getH5Offset(e));
	canvaLineA.showToolTip( getH5Offset(e), {
		format: function (item, category) {
			return category + ' ' + item.name + ':' + item.data 
		}
	});
	$('#myCanvas')[0].onmousemove=null;
};

showLineA('myCanvas',chartData);

</script>

</body>